<template>
  <div class="educationDetail-content">
          <div class="educationDetail">
                <div class="headerBox" style="margin-top:0">
                      <div class="line"></div>
                      <div class="title">教育培训详情</div>
                </div>

                 <div class="table-row display-fx-center">
                  <div class="tr per100 display-fx-center soildTop">
                      <div class="td" >
                            <span>用工单位名称</span>
                      </div>
                      <div class="full">
                            {{trainingDetail.training.enterpriseName}}  
                      </div>
                  </div>
              </div>

                <div class="table-row display-fx-center">
                  <div class="tr display-fx-center ">
                      <div class="td" >
                            <span>培训类型</span>
                      </div>
                      <div class="full" style="border-right:none">
                           {{trainingDetail.training.trainingType}}  
                      </div>
                  </div>
                  <div class="tr display-fx-center">
                      <div class="td">
                            <span>培训日期</span>
                      </div>
                      <div class="full">
                          {{trainingDetail.training.trainingTime}}  
                      </div>
                  </div>
              </div>

               <div class="headerBox">
                      <div class="line"></div>
                      <div class="title">培训人员</div>
                </div>
                 <el-table :data="infoList" border>
                  <el-table-column label="名称" align="center" prop="personnelName" />
                  <el-table-column label="身份证" align="center" prop="identityNumber" />   
                  <el-table-column label="类型" align="center" prop="personnelType" /> 
                  <el-table-column label="联系号码" align="center" prop="contactNumber" /> 
                  <el-table-column label="是否签到" align="center" prop="" /> 
                </el-table>
                 <pagination
                    v-show="total>9"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getTrainingPersonnelFn"
                  />
                <div class="headerBox">
                      <div class="line"></div>
                      <div class="title">培训内容</div>
                 </div>
                 <div class="txt1">
                        {{trainingDetail.training.trainingContent}}
                 </div>

                  <div class="imageBox">
                    <div v-for="(item,index) in trainingDetail.docList" :key="index + id">
                         <el-image class="image" :src="item.documentFileUrl" fit="cover"></el-image>
                    </div>
                  </div>
                
                 <div class="footer-btn">
                      <el-button class="btn" @click="goBackBtn">返回</el-button>
                      <!-- <el-button class="btn" type="primary" >保存</el-button>    -->
               </div>
                 
          </div>
  </div>
</template>

<script>
  import {getEducationTraining,getTrainingPersonnel} from "@/api/zhangping/occupational";
  export default {
    data() {
      return {
         id:'',
         trainingDetail:{
           training:{}
         }, 
         textareaContent:'',
         infoList:[],
         queryParams:{
             trainingId:'',
             pageNum: 1,
             pageSize: 10,
         },
         total:0
    
      };
    },
    created() {
        this.id = this.$route.query.id
        this.getEducationTrainingFn()
        this.getTrainingPersonnelFn()
    },
    methods: {
          getEducationTrainingFn(){
               let data = this.id
            getEducationTraining(data).then(res=>{
                  if(res.code == 200){
                        this.trainingDetail = res.data
                  }else{
                        this.$message.error(res.msg);  
                  }    
            })
        },
         getTrainingPersonnelFn(){
             this.queryParams.trainingId = this.id
            getTrainingPersonnel(this.queryParams).then(res=>{
                  if(res.code == 200){
                        this.infoList = res.rows
                        this.total = res.total
                  }else{
                        this.$message.error(res.msg);  
                  }    
            })
        },
        goBackBtn(){
          this.$router.back()
        },
    }
  };
</script>
<style lang="scss" scoped>
         .display-fx-center{
             display: flex;
             align-items: center;
         }
         .per100{
             width: 100%!important;
         }
         .soildTop{
             border-top:solid 1px  #dfe6ec;
         }
         .educationDetail-content{
              overflow-y: auto;
              position: relative;
              background-color: #fff;
              padding: 40px 20px;
              border-radius: 10px;
              height: calc( 100vh - 66px - 128px);
             .educationDetail{
                    max-width: 930px;
                    margin: 0 auto;
                    padding-bottom:40px;

              }
           .headerBox{
                font-size: 16px;
                color: #484848;
                font-weight: bold;
                margin-top:40px;
                margin-bottom:15px;
                @extend .display-fx-center;
                .line{
                  width: 4px;
                  height: 12px;
                  background: #5D85FF;
                  border-radius: 6px 6px 6px 6px;
                  margin-right:6px;
                }
             }
          }
          .table-row{
                font-size: 14px;
                .tr{
                    width: 50%;
                    height: 60px;
                    display: flex;
                    .td{
                      text-align: right;
                      width: 161px;
                      height: 100%;
                      border: solid 1px #dfe6ec;
                      color: #797C84;
                      background-color:#F4F8FF;
                      border-top:none;
                      border-right:none;
                      padding: 8px;
                      flex-shrink: 0;
                      @extend .display-fx-center;
                  }
                  .full{
                        width: 100%;
                        height: 100%;
                        line-height: 60px;
                        border: solid 1px #dfe6ec;
                        border-top:none;
                        padding: 0 10px;
                        @extend .display-fx-center;
                        
                    }
                } 
  
          }
          .footer-btn{
                 width: 100%;
                 background: #FFFFFF;
                 height: 78px;
                 position: fixed;
                 bottom: 0;
                 right: 0;
                .btn{
                   position: fixed;
                   bottom: 20px;
                   right: 20px;    
                }  
                 
          }
          .imageBox{
             @extend .display-fx-center;  
             flex-wrap: wrap;
               .image{
                    width: 145px;
                    height: 145px; 
                    margin: 20px 20px 20px 0;
               }
          }

        .txt1{
             font-size: 14px;
             color: #797C84;
             border: 1px solid #D3D8E2;
             padding: 12px;
             min-height: 233px;
        }
  
        ::v-deep{  
           .el-table__header-wrapper th{
                 background: #F4F8FF!important;       
           }
           .el-textarea__inner{
                background: #F7F8FA;
                border-radius:4px!important;
                border: none!important;
                height: 187px!important;
           }
        }
        
</style>
